<template>
  <el-dialog :title="`${isEdit ? '编辑' : '新增'}传感器`" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="100px" :validate-on-rule-change="false" :rules="formRules" status-icon>
        <el-form-item label="传感器名称" prop="name">
          <el-input v-model="formData.name" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="基站" prop="sensorStationId">
          <el-select v-model="formData.sensorStationId" style="width: 100%;" placeholder="请选择">
            <el-option v-for="item in sensorStationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="通道名称" prop="password">
          <el-input v-model="formData.password"></el-input>
        </el-form-item>-->
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  import { sensorStation } from '@/api/api'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        formRules: {
          name: [
            { required: true, message: '请输入传感器名称', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '传感器名称不能为空' },
                { rule: 'isRepeat', msg: { value: '传感器名称重复', url: '/Sensor/Exists', key: 'name' } },
              ]),
              trigger: 'blur'
            }
          ],
          sensorStationId: [
            { required: true, message: '请选择基站', trigger: 'blur' }
          ]
        },
        sensorStationList: [],
        apiKey: {
          search: '/Sensor/',
          add: '/Sensor',
          put: '/Sensor/'
        }
      }
    },
    watch: {
      dialogVisible: function (newValue, oldValue) {
        if (newValue) { return }
        this.$refs.RefForm.clearValidate()
      }
    },
    methods: {
      // 查询传感器基站
      async getSensorStationList() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          const { data: { items: resData, count, pageIndex } } = await sensorStation('post', obj, false)
          if (resData.length === 0) { return }
          this.sensorStationList = resData.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
        } catch (err) {
          console.log(err)
          //   Message({
          //     message: '用户名或密码错误！',
          //     type: 'error',
          //     duration: 5 * 1000
          //   })
        }
      },
      resetFormData() {
        this.formData = {
          name: '', // 传感器名称
          sensorStationId: '', // 基站ID
          // password: '',
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
